<script setup>
// 新增车辆
import { ref,onMounted,watch} from 'vue'
import { message } from 'ant-design-vue'
//树形结构
import { getBusinessHallTreeAPI } from '@/services/businessHall'
import {getTransportLineByIdAPI,putTransportLineByIdAPI,postTransportLineAPI} from '@/services/transportLine'
// 是否打开模态框-用于双向绑定
const props = defineProps(['open', 'id'])
const emit = defineEmits(['update:open', 'ok'])

// 表单组件实例
const formRef = ref()

// 表单字段
const formState = ref({
  /** 线路名称 */
  name: undefined,
  /** 线路编号 */
  number: undefined,
  /** 线路类型 */
  type: undefined,
  /** 起始地机构 */
  startOrganId:undefined,
  /** 目的地机构 */
  endOrganId: undefined,
  /** 距离 */
  distance:undefined,
/***/ 
cost:undefined,
created:undefined,
endOrganName:undefined,
extra:undefined,
startOrganName:undefined,
time:undefined,
updated:undefined
})

// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}

onMounted(()=>{
    getTreeData()
})


//获取线路详情
const getLineDetail = async (id) => {
    const res = await getTransportLineByIdAPI(id)
    console.log(res)
    formState.value = res.data
}

//监听是否id有值
watch(
  () => [props.id, props.open],
  ([id]) => {
    if (id) {
      getLineDetail(id)
    } else {
      formRef.value?.resetFields()
    }
  },
  {
    immediate: true,
  },
)

//下拉框列表
const typeList = ref([
    {value:1,name:'干线'},
    {value:2,name:'支线'},
    {value:3,name:'接驳路线'},
])



// 确定
const onOk = async () => {
  try {
    await formRef.value.validateFields()
    // 是否有 id
    if (props.id) {
      // 编辑车型
      await putTransportLineByIdAPI(props.id, formState.value)
    } else {
      // 新增车型
      await postTransportLineAPI(formState.value)
    }
    // 重置表单字段
    formRef.value.resetFields()
    // 关闭模态框
    emit('update:open', false)
    // 通知父组件，刷新表格数据
    emit('ok')
  } catch {
    message.error('路线类型不能重复')
  }
}

// 取消
const onCancel = () => {
  // 重置表单字段
  formRef.value.resetFields()
}



</script>

<template>
  <a-modal
    :open="open"
    @update:open="emit('update:open', $event)"
    :title="id ? '编辑线路' + id : '新增线路'"
    @ok="onOk"
    @onCancel="onCancel"
  >
    <a-form ref="formRef" :model="formState" :labelCol="{ span: 5 }">
      <a-form-item label="线路编号" name="number" required
       :rules="[
          {
            pattern: /^XL\d{6}$/,
            message: '线路编号前两位为XL,后6位是6为数字,请重新输入',
          },
        ]">
        <a-input v-model:value="formState.number"  />
      </a-form-item>
      <a-form-item label="线路名称" name="name" required>
        <a-input v-model:value="formState.name"   />
    
      </a-form-item>
      <a-form-item label="线路类型" name="type" required >
         <a-select v-model:value="formState.type" :disabled="id?true:
         false"
          >
        <a-select-option v-for="item in typeList" :key="item.value" :value="item.value" >{{item.name}}</a-select-option>
          </a-select>
      </a-form-item>

 <a-form-item name="startOrganId" label="起始地机构" required >
          <a-tree-select
            v-model:value="formState.startOrganId"
            :tree-data="treeData"
            placeholder="请选择起始地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
           :disabled="id?true:
         false"
          />
        </a-form-item>

 <a-form-item name="endOrganId" label="目的地机构" required >
          <a-tree-select
            v-model:value="formState.endOrganId"
            :tree-data="treeData"
            placeholder="请选择目的地机构"
            show-search
            allow-clear
            tree-default-expand-all
            tree-node-filter-prop="label"
            :disabled="id?true:
         false"
          />
        </a-form-item>
      <a-form-item v-if="id" label="距离" name="distance" required 
       :rules="[
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '只能是数字类型,最多保留两位小数,请重新输入 ',
          },
        ]">
        <a-input v-model:value="formState.distance"  suffix="千米" />
      </a-form-item>
      <a-form-item label="成本" name="cost" required v-if="id">
        <a-input v-model:value="formState.cost"  suffix="元" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
